<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px,black,solid;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items:center ;
        }
        .input1 {
            border: 5px yellowgreen solid;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <input type="text" name="" id="" class="input1">

    <script>
        // 1. 找到元素，绑定事件，添加逻辑
        const div = document.querySelector('div')
        // 点击事件
        div.addEventListener('click',function(){
            console.log(this)
            // 修改样式
            this.style.backgroundColor = 'red'
            this.innerHTML = '我喜欢你'
        })
        // 鼠标移入事件
        div.addEventListener('mouseenter',function(){
            console.log('移入')

            this.style.backgroundColor = 'gray'
        })
        // 鼠标移出事件
        div.addEventListener('mouseleave',function(){
            console.log('移出')

            this.style.backgroundColor = 'green'
        })

        const ipt = document.querySelector('input')
        // 获取焦点事件
        ipt.addEventListener('focus',function(){
            console.log('获取焦点')
        }) 
        // 失去焦点事件
        ipt.addEventListener('blur',function(){
            console.log('失去焦点')

            // 判断输入框内是否有内容
            if(this.value==='') {
                // 没有内容则加粗边框
                this.style.border = '5px,red,solid'
            }
        })
        // 键盘按下事件
        ipt.addEventListener('keydown',function(){
            console.log('按下键盘')
        })
        // 键盘抬起事件
        ipt.addEventListener('keyup',function(e){
            console.log('松开键盘')

            // 事件参数中包含了按键信息
            // 判断按下的案件是否是回车
            if(e.keyCode === 13) {
                // 是则弹出输入的内容
                alert(this.value)
            }
        })
        // 输入事件
        ipt.addEventListener('input',function(){
            console.log('键入')

            // 定义正则表达式
            const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
            // 使用正则判断用户输入的是否为邮箱
            if(regex.test(this.value)) {
                console.log('正确')
                this.style.border = '5px yellowgreen solid'
            }else {
                console.log('错误')
                this.style.border = '5px red solid'
            }
        })
    </script>
</body>
</html>